/**
 * 绘制外边框
 * @param {Object} ctx 上下文
 * @param {Object} width cnavas宽
 * @param {Object} height canvas高
 * @param {Object} sides 变长数
 * @param {Object} radius 半径
 */
function drawPolygonPath(ctx, centerX, centerY, sides, radius) {
  ctx.beginPath();
  ctx.setStrokeStyle("rgba(90, 111, 130, 0.4)");
  ctx.setLineWidth(2);
  // ctx.moveTo(centerX + Math.sin(angle), centerY - Math.cos(angle));
  let angle = 0;
  for (let i = 0; i < sides; ++i) {
    ctx.lineTo(
      centerX + radius * Math.sin(angle),
      centerY - radius * Math.cos(angle)
    );
    angle += (2 * Math.PI) / sides;
  }

  ctx.closePath();
  ctx.setFillStyle("#fff");
  ctx.fill();
}

/**
 * 绘制对角线文本
 * @param {Object} ctx 上下文
 * @param {Object} width cnavas宽
 * @param {Object} height canvas高
 * @param {Object} sides 变长数
 * @param {Object} radius 半径
 */
function drawText(ctx, data, centerX, centerY, radius) {
  let angle = 0;
  const fontSize = 18;
  const size = 5;
  const textRadius = radius + 20;
  for (let i = 0; i < data.length; i++) {
    let offsetX = 0;
    const text = data[i].attName;
    // 处理五边形左上和右上点文字偏移问题
    if (data.length === 5) {
      // 右上
      if (angle > 0 && angle < 1.5) {
        offsetX = 20;
      }
      // 左上
      else if (angle > 4.5 && angle < 6) {
        offsetX = -10;
      }
    }
    ctx.setFontSize(16);
    ctx.fontWeight;
    ctx.setTextAlign("center");
    ctx.setFillStyle("rgba(45, 44, 40, 0.6)");
    ctx.fillText(
      text,
      centerX + textRadius * Math.sin(angle) + offsetX,
      centerY - textRadius * Math.cos(angle) + 20 / 2
    );
    angle += (2 * Math.PI) / data.length;
    offsetX = 0;
  }
}

/**
 * 绘制对角线
 * @param {Object} ctx 上下文
 * @param {Object} width cnavas宽
 * @param {Object} height canvas高
 * @param {Object} sides 变长数
 * @param {Object} radius 半径
 */
function drawDiagonal(ctx, width, height, sides, radius) {
  let angle = 0;
  const centerX = width / 2;
  const centerY = height / 2;
  ctx.setStrokeStyle("rgba(90, 111, 130, 0.4)");
  ctx.setLineWidth(1);
  ctx.beginPath();
  for (let i = 0; i < sides; i++) {
    ctx.moveTo(width / 2, height / 2);
    ctx.lineTo(
      centerX + radius * Math.sin(angle),
      centerY - radius * Math.cos(angle)
    );
    angle += (2 * Math.PI) / sides;
  }
  ctx.stroke();
}

function drawTrend(ctx, width, height, data, radius) {
  // 绘制内部趋势框
  ctx.setFillStyle("rgba(165, 200, 227, .7)");
  ctx.setStrokeStyle("rgba(165, 200, 227, 1)");
  ctx.setLineWidth(3);
  ctx.beginPath();
  const sides = data.length;
  const centerX = width / 2;
  const centerY = height / 2;
  let angle = 0;
  const points = [];
  for (let i = 0; i < sides; ++i) {
    const scaleRadius = (data[i].value * width) / 100 / 2 - 60;
    points.push({
      x: centerX + scaleRadius * Math.sin(angle),
      y: centerY - scaleRadius * Math.cos(angle),
    });
    angle += (2 * Math.PI) / sides;
  }
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < sides; ++i) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

/**
 * 主方法，调用各区域绘制
 * @param {Object} ctx canvas上下文
 * @param {Object} width canvas画布宽度
 * @param {Object} height canvas画布高度
 * @param {Object} data 数据源
 */
export default function draw(ctx, width, height, data) {
  const centerX = width / 2;
  const centerY = height / 2;
  const radius = centerX - 60;
  const sides = data.length;
  // 清除画布
  ctx.clearRect(0, 0, width, height);
  // 绘制文本
  drawText(ctx, data, centerX, centerY, radius, data);
  // 绘制外框边线
  drawPolygonPath(ctx, centerX, centerY, sides, radius);
  ctx.stroke();
  // 绘制对角线
  drawDiagonal(ctx, width, height, data.length, radius);
  // 绘制趋势
  drawTrend(ctx, width, height, data, radius);
  ctx.draw();
}
